<example name="Date picker (single date)">
  <file type="html" disable-auto-size>
    <div id="date-picker"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React, {Component} from 'react';

    import DatePicker from '@jetbrains/ring-ui/components/date-picker/date-picker';

    const container = document.getElementById('date-picker');

    class DatePickerExample extends Component {
      state = {date: '20.09.14'};

      handleChange = date => this.setState({date});

      render() {
        return (
          <div>
            <DatePicker
              date={this.state.date}
              onChange={this.handleChange}
            />
          </div>
        );
      }
    }

    render(<DatePickerExample />, container);
  </file>
</example>

<example name="Date picker (range)">
  <file type="html" disable-auto-size>
    <div id="date-picker"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React, {Component} from 'react';

    import DatePicker from '@jetbrains/ring-ui/components/date-picker/date-picker';

    const container = document.getElementById('date-picker');

    class DatePickerExample extends Component {
      state = {
        from: '20 January 2015',
        to: '7 February 2015'
      };

      handleChange = range => this.setState(range);

      render() {
        return (
          <div>
            <DatePicker
              {...this.state}
              onChange={this.handleChange}
              range={true}
            />
          </div>
        );
      }
    }

    render(<DatePickerExample />, container);
  </file>
</example>

<example name="Date picker (clearable)">
  <file type="html" disable-auto-size>
    <div id="date-picker"></div>
  </file>

  <file type="js">
    import {render} from 'react-dom';
    import React, {Component} from 'react';

    import DatePicker from '@jetbrains/ring-ui/components/date-picker/date-picker';

    const container = document.getElementById('date-picker');

    class DatePickerExample extends Component {
      state = {date: '20.09.14'};

      handleChange = date => this.setState({date});

      render() {
        return (
          <div>
            <DatePicker
              date={this.state.date}
              onChange={this.handleChange}
              clear={true}
            />
          </div>
        );
      }
    }

    render(<DatePickerExample />, container);
  </file>
</example>
